CSS @property: தனிப்பயன் பண்பு வகை வரையறை மற்றும் சரிபார்ப்பில் தேர்ச்சி பெறுதல்

வலை மேம்பாட்டின் எப்போதும் மாறிவரும் உலகில், செயல்திறன், பராமரிப்புத்திறன் மற்றும் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்தும் புதிய தொழில்நுட்பங்கள் மற்றும் நுட்பங்களை ஏற்றுக்கொள்வது அவசியம். CSS தனிப்பயன் பண்புகள், CSS மாறிகள் என்றும் அழைக்கப்படுகின்றன, நாம் ஸ்டைல்களை நிர்வகிக்கும் மற்றும் கட்டுப்படுத்தும் விதத்தில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளன. @property at-rule அறிமுகத்துடன், CSS இன்னும் சக்திவாய்ந்த ஒரு கருவியைப் பெறுகிறது: இந்த தனிப்பயன் பண்புகளை வரையறுத்து சரிபார்க்கும் திறன், இது மேலும் வலுவான மற்றும் கணிக்கக்கூடிய ஸ்டைலிங்கிற்கு வழிவகுக்கிறது.

CSS @property என்றால் என்ன?

@property at-rule, டெவலப்பர்களுக்கு தனிப்பயன் பண்புகளின் வகை, தொடரியல் மற்றும் பிற பண்புகளை வரையறுக்க அனுமதிக்கிறது. இது உங்கள் CSS மாறிகளுக்கு ஒரு கட்டமைப்பு மற்றும் சரிபார்ப்பை வழங்குவதற்கான ஒரு வழியாகும். @property-க்கு முன்பு, CSS மாறிகள் அடிப்படையில் எதையும் வைத்திருக்கக்கூடிய உரை சரங்களாக இருந்தன. இந்த கட்டமைப்பின்மை பிழைகளுக்கு வழிவகுத்தது, பிழைத்திருத்தத்தை மிகவும் சவாலானதாக மாற்றியது மற்றும் ஒட்டுமொத்த வடிவமைப்பு நிலைத்தன்மையை தடுத்தது. @property உங்கள் தனிப்பயன் பண்புகளுக்கு ஒதுக்கக்கூடிய மதிப்புகளின் வகைகளைக் கட்டுப்படுத்த ஒரு பொறிமுறையை வழங்குவதன் மூலம் இந்த சிக்கல்களைத் தீர்க்கிறது.

CSS @property-ஐ ஏன் பயன்படுத்த வேண்டும்? நன்மைகள் மற்றும் பயன்கள்

@property-ஐப் பயன்படுத்துவதன் நன்மைகள் பல மற்றும் வலை மேம்பாட்டு நடைமுறைகளை மேம்படுத்துவதில் நேரடியாக பங்களிக்கின்றன:

• மேம்படுத்தப்பட்ட குறியீடு பராமரிப்பு: தனிப்பயன் பண்புகளின் வகைகள் மற்றும் நடத்தைகளை வெளிப்படையாக வரையறுப்பதன் மூலம், உங்கள் குறியீட்டை சுய-ஆவணப்படுத்தப்பட்டதாகவும் புரிந்துகொள்ள எளிதாகவும் ஆக்குகிறீர்கள். மற்ற டெவலப்பர்கள் (அல்லது உங்கள் எதிர்கால நீங்களே) ஒரு தனிப்பயன் பண்பு எவ்வாறு பயன்படுத்தப்பட வேண்டும் என்பதை விரைவாகப் புரிந்துகொள்வார்கள்.
• மேம்பட்ட வடிவமைப்பு நிலைத்தன்மை: சரிபார்ப்பு, சரியான மதிப்புகள் மட்டுமே தனிப்பயன் பண்புகளுக்கு ஒதுக்கப்படுவதை உறுதி செய்கிறது. இது உங்கள் வலைத்தளம் அல்லது பயன்பாடு முழுவதும் ஒரு நிலையான தோற்றத்தை பராமரிக்க உதவுகிறது.
• வலிமை மற்றும் பிழைத் தடுப்பு: தவறான மதிப்புகள் நிராகரிக்கப்படும், இது எதிர்பாராத ஸ்டைலிங் சிக்கல்களைத் தடுத்து, பிழைத்திருத்தத்தில் செலவிடும் நேரத்தைக் குறைக்கிறது.
• டைனமிக் ஸ்டைலிங்: @property ஜாவாஸ்கிரிப்டுடன் சிறந்த ஒருங்கிணைப்பை செயல்படுத்துகிறது, மதிப்புகள் சரியானவை என்பதை அறிந்து, நம்பிக்கையுடன் உங்கள் CSS மாறிகளை நிரல்ரீதியாக கட்டுப்படுத்தவும் புதுப்பிக்கவும் உங்களை அனுமதிக்கிறது.
• சிறந்த தானியங்கு நிரப்புதல் மற்றும் டெவலப்பர் அனுபவம்: குறியீடு எடிட்டர்கள் மிகவும் புத்திசாலித்தனமான தானியங்கு நிரப்புதல் மற்றும் குறியீடு குறிப்புகளை வழங்க முடியும், இது டெவலப்பர்கள் CSS-ஐ விரைவாகவும் துல்லியமாகவும் எழுத உதவுகிறது.
• உகந்த செயல்திறன்: செயல்திறன் பாதிப்பு பொதுவாக சிறியதாக இருந்தாலும், சரிபார்ப்பு சில நேரங்களில் உலாவியால் சிறிய மேம்பாடுகளுக்கு வழிவகுக்கும்.

@property விதியின் முக்கிய கூறுகள்

@property at-rule ஒரு தனிப்பயன் பண்பு எவ்வாறு செயல்படுகிறது என்பதை வரையறுக்கும் பல முக்கிய கூறுகளைக் கொண்டுள்ளது.

--property-name

இது நீங்கள் வரையறுக்கும் தனிப்பயன் பண்பின் பெயர். இது CSS தனிப்பயன் பண்புகளுக்கு வழக்கமானபடி இரண்டு ஹைபன்களுடன் (--) தொடங்க வேண்டும்.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

syntax விவரிப்பான், தனிப்பயன் பண்பின் மதிப்புகளுக்கான அனுமதிக்கப்பட்ட வகை அல்லது வடிவத்தை வரையறுக்கிறது. இது CSS தொடரியலின் ஒரு துணைக்குழுவைப் பயன்படுத்துகிறது மற்றும் பல்வேறு மதிப்புகளை எடுக்கலாம், அவற்றுள்:

• <color>: ஒரு வண்ண மதிப்பைக் குறிக்கிறது (எ.கா., red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: ஒரு நீள மதிப்பைக் குறிக்கிறது (எ.கா., 10px, 5em, 20%).
• <number>: ஒரு எண் மதிப்பைக் குறிக்கிறது (எ.கா., 10, 3.14).
• <percentage>: ஒரு சதவீத மதிப்பைக் குறிக்கிறது (எ.கா., 50%).
• <url>: ஒரு URL-ஐக் குறிக்கிறது (எ.கா., url('image.jpg')).
• <integer>: ஒரு முழு எண் மதிப்பைக் குறிக்கிறது (எ.கா., 10, -5).
• <angle>: ஒரு கோண மதிப்பைக் குறிக்கிறது (எ.கா., 45deg, 0.5turn).
• <time>: ஒரு நேர மதிப்பைக் குறிக்கிறது (எ.கா., 2s, 200ms).
• <string>: ஒரு சரம் மதிப்பைக் குறிக்கிறது.
• <image>: ஒரு பட மதிப்பைக் குறிக்கிறது (url போலவே).
• *: எந்தவொரு சரியான CSS மதிப்பையும் ஏற்றுக்கொள்கிறது. இது மிகவும் தாராளமான அணுகுமுறை மற்றும் எச்சரிக்கையுடன் பயன்படுத்தப்பட வேண்டும்.
• இணைக்கப்பட்ட வகைகள்: நீங்கள் பல வகைகளை இடைவெளி-பிரித்த பட்டியல்களைப் பயன்படுத்தி இணைக்கலாம் (எ.கா., மூன்று நீள மதிப்புகளை வரையறுக்க <length> <length> <length>) அல்லது '|' குறியீட்டைப் பயன்படுத்தி பட்டியலிடப்பட்ட வகைகளில் ஏதேனும் ஒன்றை அனுமதிக்கலாம் (எ.கா., ஒரு நீளம் அல்லது சதவீதத்தை ஆதரிக்க <length> | <percentage>).
• தனிப்பயன் தொடரியல்கள்: மிகவும் சிக்கலான சூழ்நிலைகளுக்கு, தனிப்பயன் தொடரியல்கள் பெரும்பாலும் தனிப்பயன் செயலாக்கங்களால் ஆதரிக்கப்படுகின்றன, இருப்பினும் இவை பொதுவாக [a-z]+ போன்ற regex-பாணி தொடரியலைப் பயன்படுத்தி விவரிக்கப்படும்.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

inherits விவரிப்பான், தனிப்பயன் பண்பு அதன் மதிப்பை அதன் பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறுகிறதா என்பதை தீர்மானிக்கிறது. இயல்பாக, தனிப்பயன் பண்புகள் மரபுரிமையாகப் பெறாது. இந்த நடத்தையை ஒரு பூலியன் மதிப்புடன் கட்டுப்படுத்தலாம்: true அல்லது false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

initial-value விவரிப்பான், CSS-ல் வெளிப்படையாக வரையறுக்கப்படாதபோது தனிப்பயன் பண்பின் இயல்புநிலை மதிப்பை அமைக்கிறது. இது பண்பு குறிப்பிடப்படாதபோது ஒரு பின்னடைவு மதிப்பை வழங்குகிறது, இது நிலையான CSS பண்புகளின் நடத்தையைப் போன்றது.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

நடைமுறை எடுத்துக்காட்டுகள்

@property-ஐ எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதை விளக்க சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: ஒரு வண்ணப் பண்பை வரையறுத்தல்

இந்த எடுத்துக்காட்டில், எங்கள் வடிவமைப்பு அமைப்பில் ஒரு முதன்மை வண்ணத்தைக் குறிக்க --primary-color என்ற தனிப்பயன் பண்பை வரையறுக்கிறோம். இது வண்ண மதிப்புகளை மட்டுமே ஏற்றுக்கொள்கிறது என்பதை நாங்கள் குறிப்பிடுகிறோம்.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Valid */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Valid */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

எடுத்துக்காட்டு 2: ஒரு நீளப் பண்பை வரையறுத்தல்

இங்கே, உறுப்புகளுக்கு இடையிலான இடைவெளியை நிர்வகிக்க --spacing என்ற தனிப்பயன் பண்பை வரையறுக்கிறோம், இது நீள மதிப்புகளை ஏற்றுக்கொள்கிறது. இந்த எடுத்துக்காட்டு, முழு தளத்திற்கும் இயல்புநிலையாக `initial-value`-ஐ அமைப்பதன் மதிப்பை தெளிவாகக் காட்டுகிறது. இது இடைவெளி இயல்புநிலைகள் வரையறுக்கப்பட்ட ஒரு வடிவமைப்பு அமைப்பைப் பயன்படுத்தும் போது குறிப்பாக பயனுள்ளதாக இருக்கும்.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

எடுத்துக்காட்டு 3: ஒரு முழு எண் பண்பை வரையறுத்தல்

இந்த எடுத்துக்காட்டு ஒரு கிரிட் அமைப்பில் உள்ள நெடுவரிசைகளின் எண்ணிக்கைக்கான ஒரு தனிப்பயன் பண்பை வரையறுக்கிறது, மதிப்பு ஒரு முழு எண் என்பதை சரிபார்க்கிறது.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

எடுத்துக்காட்டு 4: பண்பு மரபுரிமை

இங்கே நாம் மரபுரிமையாகப் பெறப்படும் ஒரு தனிப்பயன் பண்பை வரையறுக்கிறோம். body-ல் `1rem` என அமைக்கப்பட்ட `font-size` பண்பு, மேலெழுதப்படாவிட்டால் அதன் அனைத்து குழந்தைகளையும் பாதிக்கும்.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Overrides inherited value */
}

            

              
                Copy
              
            
          

எடுத்துக்காட்டு 5: வகைகளை இணைத்தல்

'|' ஆபரேட்டரைப் பயன்படுத்தி, நாம் வகைகளை இணைக்கலாம். இங்கே நாம் நிழல் ஆஃப்செட்டிற்காக ஒரு `length` அல்லது ஒரு `percentage`-ஐ ஏற்றுக்கொள்கிறோம்.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

@property-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

@property-ன் நன்மைகளை அதிகரிக்க, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• பண்புகளை ஒரு மைய இடத்தில் வரையறுத்தல்: உங்கள் @property வரையறைகளை ஒரு பிரத்யேக CSS கோப்பில் அல்லது பிரிவில், பெரும்பாலும் உங்கள் முக்கிய ஸ்டைல்ஷீட்டின் மேலே அல்லது ஒரு வடிவமைப்பு அமைப்பு கோப்பிற்குள் குழுவாக்கவும். இது அமைப்பை ஊக்குவிக்கிறது மற்றும் உங்கள் தனிப்பயன் பண்புகளை நிர்வகிப்பதை எளிதாக்குகிறது.
• விளக்கமான பண்புப் பெயர்களைப் பயன்படுத்துதல்: ஒவ்வொரு தனிப்பயன் பண்பின் நோக்கத்தையும் தெளிவாகக் குறிக்கும் பெயர்களைத் தேர்வு செய்யவும் (எ.கா., --primary-button-color, --header-font-size). இது வாசிப்புத்திறனையும் புரிதலையும் மேம்படுத்துகிறது.
• விரிவான ஆவணங்களை வழங்குதல்: உங்கள் தனிப்பயன் பண்புகளை, அவற்றின் தொடரியல், பயன்பாடு மற்றும் ஏதேனும் கட்டுப்பாடுகள் உட்பட ஆவணப்படுத்தவும். இந்த ஆவணங்கள் உங்கள் CSS உடன் கருத்துகளின் வடிவத்தில் அல்லது ஒரு தனி ஸ்டைல் வழிகாட்டியில் சேர்க்கப்படலாம்.
• சரியான தொடரியலைத் தேர்வுசெய்தல்: ஒவ்வொரு பண்பிற்கும் பொருத்தமான syntax-ஐ கவனமாகத் தேர்ந்தெடுக்கவும். சரியான தொடரியலைப் பயன்படுத்துவது பிழைகளைத் தடுக்கிறது மற்றும் ஒதுக்கப்பட்ட மதிப்புகள் சரியானவை என்பதை உறுதி செய்கிறது.
• மரபுரிமையை கவனமாகக் கருதுதல்: ஒரு பண்பு அதன் மதிப்பை அதன் பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற வேண்டுமா என்பதைத் தீர்மானிக்கவும். இது பண்பின் தன்மை மற்றும் அது உங்கள் வடிவமைப்பு முழுவதும் எவ்வாறு பயன்படுத்தப்பட வேண்டும் என்பதைப் பொறுத்தது.
• initial-value-ஐ மூலோபாய ரீதியாகப் பயன்படுத்துதல்: இயல்புநிலை மதிப்பு தேவைப்படும் அனைத்து தனிப்பயன் பண்புகளுக்கும் ஒரு initial-value-ஐ அமைக்கவும். இது ஒரு பின்னடைவை வழங்குகிறது மற்றும் பண்பு வெளிப்படையாக அமைக்கப்படாவிட்டாலும் ஸ்டைல் பயன்படுத்தப்படுவதை உறுதி செய்கிறது.
• வடிவமைப்பு அமைப்புகளைப் பயன்படுத்துதல்: நிலைத்தன்மையைப் பராமரிக்கவும் உங்கள் குழுவின் மேம்பாட்டு பணிப்பாய்வை மேம்படுத்தவும் உங்கள் வடிவமைப்பு அமைப்பிற்குள் @property-ஐ ஒருங்கிணைக்கவும். மற்ற கூறுகளுடன் இணைந்து இதைப் பயன்படுத்துவதன் மூலம், நீங்கள் மேலும் வலுவான மற்றும் மட்டுப்படுத்தப்பட்ட வடிவமைப்புகளை உருவாக்குகிறீர்கள், இது உலகளாவிய பயன்பாட்டிற்காக கூறுகளை உருவாக்கும் போது பெரும்பாலும் இலக்காக இருக்கும்.
• முழுமையாகச் சோதித்தல்: இணக்கத்தன்மை மற்றும் ஒரு நிலையான பயனர் அனுபவத்தை உறுதி செய்ய உங்கள் தனிப்பயன் பண்புகள் மற்றும் அவற்றின் நடத்தையை வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்கவும். `property`-க்கான ஆதரவு இன்னும் உலகளவில் செயல்படுத்தப்படாததால், பல-உலாவி சோதனை ஒரு முக்கியமான படியாகும்.

உலாவி இணக்கத்தன்மை

அக்டோபர் 26, 2023 நிலவரப்படி, @property at-rule-க்கான ஆதரவு உலாவிகளுக்கு இடையில் மாறுபடுகிறது. Chrome, Edge, மற்றும் Safari நல்ல ஆதரவைக் கொண்டுள்ளன, அதே நேரத்தில் Firefox ஆதரவு ஒரு வரையறுக்கப்பட்ட நிலையில் உள்ளது. உலாவி இணக்கத்தன்மை குறித்த புதுப்பித்த தகவல்களுக்கு Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) போன்ற ஆதாரங்களை எப்போதும் கலந்தாலோசிக்கவும்.

உலாவி இணக்கத்தன்மைக்கான முக்கிய பரிசீலனைகள்:

• அம்சம் கண்டறிதல்: @property-ஐ ஆதரிக்காத உலாவிகளை நளினமாகக் கையாள அம்சம் கண்டறிதல் நுட்பங்களைப் பயன்படுத்தவும். மாற்று ஸ்டைல்கள் அல்லது பாலிஃபில்களைப் பயன்படுத்த நீங்கள் ஒரு CSS பண்பு சரிபார்ப்பு அல்லது ஜாவாஸ்கிரிப்ட் அம்சம் கண்டறிதலைப் பயன்படுத்தலாம்.
• படிப்படியான மேம்பாடு: @property இல்லாமல் வேலை செய்யும் ஒரு அடிப்படை ஸ்டைலிங்குடன் உங்கள் வலைத்தளத்தை வடிவமைக்கவும். பின்னர், இணக்கமான உலாவிகளுக்கு @property ஆதரவைச் சேர்ப்பதன் மூலம் படிப்படியாக வடிவமைப்பை மேம்படுத்தவும்.
• பாலிஃபில்கள் மற்றும் பின்னடைவுகள்: @property-ஐ முழுமையாக ஆதரிக்காத உலாவிகளுக்கு பாலிஃபில்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும் அல்லது பின்னடைவுகளை வழங்கவும். இது சாதாரண CSS மாறிகளைப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம், அல்லது SASS, LESS அல்லது பிற வழிமுறைகளைப் பயன்படுத்தி முன்-செயலாக்கம் செய்வதை உள்ளடக்கியிருக்கலாம்.

ஜாவாஸ்கிரிப்டுடன் CSS @property-ஐப் பயன்படுத்துதல்

CSS தனிப்பயன் பண்புகளின் மிகப்பெரிய நன்மைகளில் ஒன்று, அவற்றை ஜாவாஸ்கிரிப்ட் மூலம் கையாள முடியும், இது டைனமிக் ஸ்டைலிங் மற்றும் மேம்பட்ட பயனர் அனுபவங்களை செயல்படுத்துகிறது. @property இந்த திறனை மேம்படுத்துகிறது, CSS மற்றும் ஜாவாஸ்கிரிப்டுக்கு இடையிலான ஒருங்கிணைப்பை இன்னும் சக்திவாய்ந்ததாகவும் கணிக்கக்கூடியதாகவும் ஆக்குகிறது.

@property-ஐப் பயன்படுத்தி வரையறுக்கப்பட்ட தனிப்பயன் பண்புகளுடன் ஜாவாஸ்கிரிப்டில் எவ்வாறு தொடர்பு கொள்ளலாம் என்பது இங்கே:

1. ஒரு தனிப்பயன் பண்பு மதிப்பை பெறுதல்: ஒரு தனிப்பயன் பண்பின் மதிப்பை மீட்டெடுக்க getPropertyValue()-ஐப் பயன்படுத்தவும்.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // e.g., "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. ஒரு தனிப்பயன் பண்பு மதிப்பை அமைத்தல்: ஒரு தனிப்பயன் பண்பின் மதிப்பை அமைக்க setProperty()-ஐப் பயன்படுத்தவும். `@property` வரையறையின் syntax அளவுரு காரணமாக, ஜாவாஸ்கிரிப்ட் அடிப்படையிலான அமைப்பு உலாவியில் மதிப்பு சரிபார்ப்பைத் தூண்டக்கூடும்.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

எடுத்துக்காட்டு: ஜாவாஸ்கிரிப்ட் மூலம் டைனமிக் வண்ண மாற்றம்

ஜாவாஸ்கிரிப்ட் மற்றும் @property-ஐப் பயன்படுத்தி ஒரு டைனமிக் வண்ண மாற்றத்தை எவ்வாறு உருவாக்குவது என்பதை விளக்குவோம்.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Could be based on some logic/input
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், பொத்தானைக் கிளிக் செய்வதன் மூலம் ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தி --button-color தனிப்பயன் பண்பை மாற்றுவதன் மூலம் பொத்தானின் பின்னணி நிறம் மாறுகிறது.

சர்வதேசமயமாக்கல் (i18n) மற்றும் CSS @property

பல்வேறு மொழிகள் மற்றும் இடங்களை ஆதரிக்கும் வலைப் பயன்பாடுகளை உருவாக்குவதில் CSS @property ஒரு மதிப்புமிக்க கருவியாக இருக்க முடியும். இது i18n-க்கு எவ்வாறு பயன்படுத்தப்படலாம் என்பது இங்கே:

• எழுத்துருவியல்: எழுத்துரு அளவுகள், வரி உயரங்கள் மற்றும் எழுத்துரு குடும்பங்களுக்கு தனிப்பயன் பண்புகளை வரையறுக்கவும், இது தேர்ந்தெடுக்கப்பட்ட மொழிக்கு ஏற்ப உரையின் தோற்றத்தை மாற்றியமைக்க உங்களை அனுமதிக்கிறது.
• அமைப்பு: உரை திசை (எ.கா., இடமிருந்து வலம் எதிராக வலமிருந்து இடம்) மற்றும் வெவ்வேறு எழுத்து அகலங்களில் ஏற்படும் வேறுபாடுகளுக்கு இடமளிக்க இடைவெளி, ஓரங்கள் மற்றும் திணிப்புக்கான பண்புகளைப் பயன்படுத்தவும்.
• வண்ணங்கள்: பொத்தான் வண்ணங்கள், உரை வண்ணங்கள் மற்றும் பின்னணி வண்ணங்கள் போன்ற UI உறுப்பு வண்ணங்களுக்கான பண்புகளைப் பயன்படுத்தவும். இவை குறிப்பிட்ட பிராந்தியங்களுக்கான கலாச்சார விருப்பத்தேர்வுகள் அல்லது வடிவமைப்பு வழிகாட்டுதல்களுடன் சீரமைக்க சரிசெய்யப்படலாம்.
• உரை திசை: உரை திசையைக் கட்டுப்படுத்த ஒரு தனிப்பயன் பண்பைப் பயன்படுத்தவும் (எ.கா., ltr, rtl) மற்றும் அதற்கேற்ப அமைப்பை மாற்றியமைக்கவும்.

எடுத்துக்காட்டு: மொழிக்கு ஏற்ப எழுத்துரு அளவுகளை மாற்றியமைத்தல்

இந்த எடுத்துக்காட்டில், தேர்ந்தெடுக்கப்பட்ட மொழிக்கு ஏற்ப தலைப்புகளின் எழுத்துரு அளவை எவ்வாறு மாற்றியமைப்பது என்பதைக் காட்டுகிறோம். இந்த அணுகுமுறை பொருத்தமான மொழியைத் தீர்மானிக்க மற்றும் தனிப்பயன் பண்புகளை அமைக்க ஒரு ஜாவாஸ்கிரிப்ட் நூலகத்தைப் பயன்படுத்தும்.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

பின்னர், கண்டறியப்பட்ட மொழிக்கு ஏற்ப ஜாவாஸ்கிரிப்டில் மதிப்பை டைனமிக்காக அமைக்கவும்:

            
// Assuming a global variable or function to get the user's language
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Adjust for Japanese
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Default
}

            

              
                Copy
              
            
          

அணுகல்தன்மை பரிசீலனைகள்

@property உடன் பணிபுரியும் போது, அணுகல்தன்மையை மனதில் வைத்திருப்பது அவசியம்:

• வண்ண வேறுபாடு: உரை மற்றும் பின்னணிகளுக்கு இடையில் போதுமான வண்ண வேறுபாட்டை உறுதி செய்யவும். வண்ண வேறுபாட்டுத் தேவைகளைப் பூர்த்தி செய்ய வடிவமைப்பை எளிதாகப் புதுப்பிக்க வண்ணங்களுக்கு தனிப்பயன் பண்புகளைப் பயன்படுத்தவும்.
• உரை அளவு: பயனர்கள் உரை அளவைக் கட்டுப்படுத்த அனுமதிக்கவும். எழுத்துரு அளவை எளிதாக்க உறவினர் அலகுகள் (rem, em) மற்றும் தனிப்பயன் பண்புகளைப் பயன்படுத்தவும்.
• கவன குறிகாட்டிகள்: கவன குறிகாட்டிகளை தெளிவாகத் தெரியும் வகையில் தனிப்பயனாக்கவும். கவன அவுட்லைன்களின் நிறம் மற்றும் பாணியைக் கட்டுப்படுத்த தனிப்பயன் பண்புகளைப் பயன்படுத்தவும்.
• ARIA பண்புக்கூறுகள்: நிலைகள் அல்லது நடத்தையைக் கட்டுப்படுத்த தனிப்பயன் பண்புகளைப் பயன்படுத்தும் போது உறுப்புகளுக்கு பொருத்தமான ARIA பண்புக்கூறுகள் இருப்பதை உறுதி செய்யவும்.
• விசைப்பலகை வழிசெலுத்தல்: உங்கள் வலைத்தளம் ஒரு விசைப்பலகையைப் பயன்படுத்தி எளிதாக வழிசெலுத்தக்கூடியதா என்பதை சரிபார்க்கவும், குறிப்பாக ஊடாடும் உறுப்புகளை நிர்வகிக்க தனிப்பயன் பண்புகள் பயன்படுத்தப்பட்டால்.

பல-உலாவி பரிசீலனைகள் மற்றும் தீர்வுகள்

@property ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், உலாவி ஆதரவு இன்னும் உலகளவில் செயல்படுத்தப்படவில்லை என்பதை நினைவில் கொள்ளுங்கள். ஆதரவின்மையின் தாக்கத்தைக் குறைக்க நீங்கள் பல-உலாவி நுட்பங்களைப் பயன்படுத்த வேண்டும்.

• படிப்படியான மேம்பாடு: உங்கள் ஸ்டைலிங்கை அடிப்படை CSS மாறிகளுடன் வடிவமைத்து, பின்னர் ஆதரிக்கப்படும் உலாவிகளில் கூடுதல் அம்சங்களுக்கு `@property`-ஐப் பயன்படுத்தவும்.
• அம்சம் கண்டறிதல்: ஒரு உலாவி @property-ஐ ஆதரிக்கிறதா என்பதைத் தீர்மானிக்க அதைப் பயன்படுத்தி ஸ்டைல்களைப் பயன்படுத்துவதற்கு முன்பு அம்சம் கண்டறிதல் முறைகளைப் பயன்படுத்தவும். ஜாவாஸ்கிரிப்ட்டைப் பயன்படுத்தி ஒரு எளிய சரிபார்ப்பு செய்யப்படலாம்.
• CSS பின்னடைவுகள்: ஆதரிக்கப்படாத பண்புகளுக்கு பின்னடைவு மதிப்புகளை வழங்கவும். இது பண்புகளை நேரடியாக அமைப்பதன் மூலம் அல்லது ஆதரிக்கப்படும் மற்றும் ஆதரிக்கப்படாத உலாவிகளுக்கு வெவ்வேறு மாறிகளைப் பயன்படுத்துவதன் மூலம் செய்யப்படலாம்.
• முன்செயலிகள்: Sass அல்லது Less போன்ற CSS முன்செயலிகளைப் பயன்படுத்தி உயர்-நிலை கட்டமைப்புகளை முழுமையான `@property` ஆதரவு இல்லாத உலாவிகளில் பயன்படுத்தக்கூடிய நிலையான CSS-ஆக மொழிபெயர்க்கவும். இது ஒரு கூடுதல் படியை அறிமுகப்படுத்தினாலும், நன்மைகள் பெரும்பாலும் குறைபாடுகளை விட அதிகமாக இருக்கும்.

ஒரு CSS பின்னடைவுக்கான எடுத்துக்காட்டு:

            
.element {
  --base-color: #333; /* Default value for browsers without @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Feature Detection for @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Add more complex styling here utilizing the @property */
}

            

              
                Copy
              
            
          

கருவிகள் மற்றும் நூலகங்கள்

@property உடன் பணிபுரிய பல்வேறு கருவிகள் மற்றும் நூலகங்கள் உதவக்கூடும்:

• PostCSS செருகுநிரல்கள்: `postcss-custom-properties` மற்றும் `postcss-custom-properties-experimental` போன்ற செருகுநிரல்கள் தனிப்பயன் பண்புகளை மாற்றவும், `@property` வரையறைகளை சமமான CSS விதிகளாக மாற்றுவதன் மூலம் பழைய உலாவிகளுக்கு ஆதரவளிக்கவும் உதவும்.
• Stylelint: உங்கள் தனிப்பயன் பண்புகளின் பயன்பாடு மற்றும் கட்டமைப்பை சரிபார்க்க ஸ்டைல்லிண்ட் மற்றும் தனிப்பயன் விதிகள் அல்லது செருகுநிரல்களை ஒருங்கிணைக்கவும்.
• வடிவமைப்பு அமைப்பு கட்டமைப்புகள்: வடிவமைப்பு நிலைத்தன்மையை உறுதிப்படுத்தவும், டெவலப்பர்களுக்கு ஒரு மென்மையான அனுபவத்தை வழங்கவும் Ant Design, Material UI மற்றும் Bootstrap போன்ற பிரபலமான வடிவமைப்பு அமைப்பு கட்டமைப்புகளில் @property-ஐ ஒருங்கிணைக்கவும்.

முடிவுரை

CSS @property வலை மேம்பாட்டுக் கருவித்தொகுப்பிற்கு ஒரு சக்திவாய்ந்த கூடுதலாகும், இது தனிப்பயன் பண்புகளுக்கு கட்டமைப்பு, சரிபார்ப்பு மற்றும் டைனமிக் திறன்களைக் கொண்டுவருகிறது. உங்கள் CSS மாறிகளின் வகை மற்றும் நடத்தையை வரையறுப்பதன் மூலம், நீங்கள் குறியீடு பராமரிப்பை மேம்படுத்தலாம், வடிவமைப்பு நிலைத்தன்மையை மேம்படுத்தலாம், மற்றும் மேலும் வலுவான மற்றும் கணிக்கக்கூடிய ஸ்டைலிங் தீர்வுகளை உருவாக்கலாம்.

உலாவி ஆதரவு மேம்படும்போது, உங்கள் திட்டங்களில் @property-ஐ இணைப்பது பெருகிய முறையில் முக்கியமானது. இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளை ஏற்றுக்கொள்வதன் மூலம், இந்த புதிய அம்சத்தின் நன்மைகளைப் பயன்படுத்தலாம் மற்றும் மேலும் திறமையான, பராமரிக்கக்கூடிய மற்றும் அளவிடக்கூடிய CSS-ஐ எழுதலாம். @property-ஐத் தழுவுங்கள், உங்கள் வலை மேம்பாட்டுப் பணிப்பாய்வை மாற்றுங்கள்!

மேலும் கற்க

• MDN வலை ஆவணங்கள்: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property